<template>
	<view class="container">
		<view class="detail_part">
			<view class="content">
				<view class="mini_title">
					我的余额
				</view>
				<view class="mid_tilte">
					<view class="money">
						{{obj.money}}
					</view>
					<view class="" @click="recharge()">
						充值<image src="../../static/img/walletManage/whiteright.png" mode=""></image>
					</view>
				</view>
				<view class="bottom_title">
					<view class="">
						冻结资金：￥{{obj.noUse}}
					</view>
					<view class="">
						累计收入：￥{{obj.totalMoney}}
					</view>
				</view>
			</view>
			
		</view>
		<view class="title_part">
			<view class="title">
				<view class="yellow_line">
					
				</view>
				<view class="">
					收益明细
				</view>
			</view>
			<view class="cashout_part">
				<image src="../../static/img/walletManage/cash.png" mode=""></image>
				<view class="">
					提现
				</view>
			</view>
		</view>
	     <view class="cash_list" v-for="(item,index) in cashList" :key="index">
			 <view class="">
			 	<view class="name">
			 		{{item.remark}}
			 	</view>
				<view class="time">
					{{$utils.happenTimeFun(item.createTime)}}
				</view>
			 </view>
			 <view class="price">
			 	{{item.type == 2 ? '-':'+'}}{{item.money}}
			 </view>
	     	
	     </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cashList:[],
				info:{
					type: 0,
					page:1,
					pageSize: 20
				},
				total: 0,
				obj: {}
			}
		},
		created() {
			this.getList()
		},
		onPullDownRefresh(){ //下拉刷新
			this.info.page = 1
			this.getList()
			uni.stopPullDownRefresh()
		},
		onReachBottom(){ //上垃加载
			if(this.info.page < this.total) {
				this.info.page++
			}
		},
		methods: {
			getList(){
				this.$utils.requert({ url: 'myMoneyRecord', data: this.info, type: 'post' }).then(res => {
					if (res.code === 1) {
						let data = res.data.data;
						this.obj = res.data
						this.total = Math.ceil(res.data.total / this.info.pageSize)
						if (this.info.page == 1) {
							this.cashList = this.cashList.concat(data)
						} else {
							this.cashList = data
						}
					} else {
						this.$utils.showLayer(res.message);
					}
				});
			},
			recharge(){
				uni.navigateTo({
					url:'/pages/rechargeCenter/rechargeCenter'
				})
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		margin-bottom: 100rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}
	.detail_part{
		width: 100%;
		height: 324rpx;
		background: url("../../static/img/walletManage/bgc.png") no-repeat; 
		background-size:100% 100%; 
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.detail_part .content{
		margin: 0 62rpx;
		font-size: 26rpx;
		color:#fff;
	}
	.detail_part .content .mid_tilte{
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 32rpx 0 10rpx;
	}
	.detail_part .content .mid_tilte .money{
		font-size: 85rpx;
	}
	.detail_part .content .mid_tilte image{
		width:14rpx;
		height: 24rpx;
		margin-left: 10rpx;
		}
  .detail_part .content .bottom_title{
	  display: flex;
	  justify-content: space-between;
  }
  .title_part{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  font-size: 22rpx;
	  color: #797979;
	  margin-bottom: 28rpx;
  }
  .title_part .title{
	  font-size: 34rpx;
	  color: #1A1A1A;
	  display: flex;
	  
	  }
	  .title_part .title .yellow_line{
		  width:8rpx;
		  height: 32rpx;
		  background-color: #FB8408;
		  border-radius: 32rpx;
		  margin-right: 10rpx;
		  margin-top:12rpx;
	  }
	  
	.title_part .cashout_part{
		display: flex;
		align-items: center;
	}
	.title_part .cashout_part image{
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}
	.cash_list{
		display: flex;
		padding:40rpx 32rpx;
		box-sizing: border-box;
		justify-content: space-between;
		box-shadow:0px 0px 19rpx 0px rgba(48,48,48,0.1);
		border-radius:8px;
		margin-bottom: 27rpx;
	}
	.cash_list .name{
		font-size: 26rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}
	.cash_list .time{
		font-size: 24rpx;
		color: #A2A1A0;
	}
	.cash_list .price{
		color:#FA4600;
		fonr-size:34rpx;
	}
</style>
